<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>echarts--散点图 态势</title>
    <script type="text/javascript" src="./lib/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="./lib/echarts-all-4.js"></script>
    <script type="text/javascript" src="./lib/Cesium/viewerCesiumNavigationMixin.js"></script>
    <script type="text/javascript" src="../dist/FlowEcharts.js"></script>
    <link rel="stylesheet" href="./lib/Cesium/Widgets/widgets.css">


    <style>
    html, body {
      display: block;
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

    #cesiumContainer {
      height: 100%;
    }
    </style>
  </head>
  <body>
    <div id="cesium-logo"></div>
    <div id="cesiumContainer"></div>

    <script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
      navigationHelpButton: false,
      imageryProvider : Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
      }),
      baseLayerPicker : false,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
      creditContainer: 'cesium-logo'
    })

    viewer.extend(Cesium.viewerCesiumNavigationMixin, {})

    var workEcharts = {
      layerWork: null,
      create: function(e) {
        this.viewer = e
        this.path = ''
      },
      activate: function() {
        this.showData()
      },
      disable: function() {
        this.layerWork.dispose()
        this.layerWork = null
      },
      showData: function(e) {
        var a = this.getOption(e)
        null == this.layerWork ? this.layerWork = new FlowEcharts(this.viewer, a) : this.layerWork.updateOverlay(a)
      },
      getOption: function(e) {
        var o = {
          '上海': [121.48, 31.22],
          '珠海': [113.52, 22.3],
          '三亚': [109.31, 18.14],
          '惠州': [114.4, 23.09],
          '海口': [110.35, 20.02],
          '合肥': [117.27, 31.86],
          '南京': [118.78, 32.04],
          '杭州': [120.19, 30.26],
          '苏州': [120.62, 31.32],
          '无锡': [120.29, 31.59],
          '昆山': [120.95, 31.39],
          '广州': [113.23, 23.16],
          '深圳': [114.07, 22.62],
          '佛山': [113.11, 23.05],
          '东莞': [113.75, 23.04],
          '福州': [119.3, 26.08],
          '厦门': [118.1, 24.46],
          '南宁': [108.33, 22.84],
          '郑州': [113.65, 34.76],
          '武汉': [114.31, 30.52],
          '长沙': [113, 28.21],
          '南昌': [115.89, 28.68],
          '北京': [116.46, 39.92],
          '长春': [125.35, 43.88],
          '大连': [121.62, 38.92],
          '沈阳': [123.38, 41.8],
          '哈尔滨': [126.63, 45.75],
          '天津': [117.2, 39.13],
          '济南': [117, 36.65],
          '青岛': [120.33, 36.07],
          '太原': [112.53, 37.87],
          '石家庄': [114.48, 38.03],
          '西安': [108.95, 34.27],
          '成都': [104.06, 30.67],
          '重庆': [106.54, 29.59],
          '昆明': [102.73, 25.04]
        }
        var a = function(e) {
          for (var a = [], t = 0; t < e.length; t++) {
            var n = o[e[t].name]
            n && a.push({ name: e[t].name, value: n.concat(e[t].value) })
          }
          return a
        }
        var t = [a(e = [{ name: '上海', value: 19780 }, { name: '珠海', value: 2186 }, {
          name: '三亚',
          value: 1135
        }, { name: '惠州', value: 1973 }, { name: '海口', value: 2568 }, { name: '合肥', value: 4039 }, {
          name: '南京',
          value: 6959
        }, { name: '杭州', value: 5632 }, { name: '苏州', value: 6707 }, { name: '无锡', value: 3393 }, {
          name: '昆山',
          value: 1894
        }, { name: '广州', value: 15769 }, { name: '深圳', value: 8259 }, { name: '佛山', value: 5741 }, {
          name: '东莞',
          value: 3030
        }, { name: '福州', value: 4542 }, { name: '厦门', value: 3329 }, { name: '南宁', value: 3157 }, {
          name: '郑州',
          value: 6690
        }, { name: '武汉', value: 8678 }, { name: '长沙', value: 5303 }, { name: '南昌', value: 3025 }, {
          name: '北京',
          value: 20259
        }, { name: '长春', value: 3016 }, { name: '大连', value: 3202 }, { name: '沈阳', value: 4540 }, {
          name: '哈尔滨',
          value: 3141
        }, { name: '天津', value: 8626 }, { name: '济南', value: 4361 }, { name: '青岛', value: 6667 }, {
          name: '太原',
          value: 4080
        }, { name: '石家庄', value: 6137 }, { name: '西安', value: 6991 }, { name: '成都', value: 13873 }, {
          name: '重庆',
          value: 13283
        }, { name: '昆明', value: 4633 }]), a(e.sort(function(e, a) {
          return a.value - e.value
        }).slice(0, 6))]
        e.sort(function(e, a) {
          return e.value - a.value
        })
        for (var n = [], r = [], i = 0, l = e.length, s = 0; s < e.length; s++) {
          n.push(e[s].name), r.push(e[s].value), i += e[s].value
        }
        var option = {
          animation: !1,
          backgroundColor: 'rgba(17, 19, 42, 0.3)',
          title: [{
            text: '散点图态势',
            subtext: 'san dian tu taishi',
            left: 'center',
            textStyle: { color: '#fff' }
          }, {
            id: 'statistic',
            text: l ? '平均: ' + parseInt((i / l).toFixed(4)) : '',
            right: 120,
            top: 40,
            width: 100,
            textStyle: { color: '#fff', fontSize: 16 }
          }],
          GLMap: {},
          tooltip: { trigger: 'item' },
          grid: { right: 40, top: 100, bottom: 40, width: '30%' },
          xAxis: {
            type: 'value',
            scale: !0,
            position: 'top',
            boundaryGap: !1,
            splitLine: { show: !1 },
            axisLine: { show: !1 },
            axisTick: { show: !1 },
            axisLabel: { margin: 2, textStyle: { color: '#aaa' } }
          },
          yAxis: {
            type: 'category',
            nameGap: 16,
            axisLine: { show: !0, lineStyle: { color: '#ddd' } },
            axisTick: { show: !1, lineStyle: { color: '#ddd' } },
            axisLabel: { interval: 0, textStyle: { color: '#ddd' } },
            data: n
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'GLMap',
            data: t[0],
            symbolSize: function(e) {
              var a = e[2] / 500 * 1.5
              return Math.max(a, 8)
            },
            label: { normal: { formatter: '{b}', position: 'right', show: !1 }, emphasis: { show: !0 } },
            itemStyle: { normal: { color: '#FF8C00', position: 'right', show: !0 } }
          }, {
            type: 'effectScatter',
            coordinateSystem: 'GLMap',
            data: t[0],
            symbolSize: function(e) {
              var a = e[2] / 500
              return Math.max(a, 8)
            },
            showEffectOn: 'render',
            rippleEffect: { brushType: 'stroke' },
            hoverAnimation: !0,
            label: { normal: { formatter: '{b}', position: 'right', show: !0 } },
            itemStyle: { normal: { color: '#f4e925', shadowBlur: 50, shadowColor: '#EE0000' } },
            zlevel: 1
          }, {
            id: 'bar',
            zlevel: 2,
            type: 'bar',
            symbol: 'none',
            itemStyle: { normal: { color: '#ddb926' } },
            data: e
          }]
        }
        console.log(option, 'option')
        return option
      }
    }

    function initWork() {
      workEcharts.create(viewer)
      workEcharts.activate()
    }

    initWork()

    </script>
  </body>
</html>
